import {uSelectMyDevListDataAnalyse} from '@/api/dataOverview'
import useGlobalAPI from '@/hooks/useGlobalAPI'
import {getUserId} from '@/libs/auth'
import {RouterView} from 'vue-router'
import {AlarmMsgCard} from './components/alarmMsgCard'
import {DeviceCard} from './components/deviceCard'
import {DevOverviewCard} from './components/devOverviewCard'
import {QuicklyClickCard} from './components/quicklyClick'
import {TrendsCard} from './components/trendsCard'
import {WaterAnalyzeCard} from './components/waterAnalyzeCard'
import {WaterOverviewCard} from './components/waterOverviewCard'

export default defineComponent({
  name: 'CBC-home',
  setup() {
    const {route} = useGlobalAPI()

    const state = reactive<{
      devList: DataOverview.DeviceListData[] | null
    }>({
      devList: null
    })

    function getDevList() {
      const userId = getUserId()
      if (!userId) {
        return
      }
      uSelectMyDevListDataAnalyse({userId})
        .then(res => {
          state.devList = res.data
        })
        .catch(err => {
          state.devList = []
        })
    }

    async function getPageData() {
      // getDevList()
    }

    onMounted(() => {
      // location.reload()
      window.history.pushState(null, null, document.URL)
      window.addEventListener('popstate', function (e) {
        history.pushState(null, null, document.URL)
      })
      getPageData()
    })

    return () =>
      route.path === '/CBC/dataOverview' ? (
        <div class='grid grid-cols-3 gap-x-20 gap-y-20'>
          <WaterOverviewCard></WaterOverviewCard>

          <WaterAnalyzeCard></WaterAnalyzeCard>

          <DevOverviewCard></DevOverviewCard>

          <AlarmMsgCard></AlarmMsgCard>

          <QuicklyClickCard></QuicklyClickCard>

          {/* <div class='col-span-2 grid grid-cols-1 gap-y-20'>
            {state.devList && state.devList.map(item => <DeviceCard devData={item}></DeviceCard>)}
          </div>

          <div class='col-span-1'>
            <TrendsCard></TrendsCard>
          </div> */}
        </div>
      ) : (
        <RouterView></RouterView>
      )
  }
})
